<template>
	<view class="page-total">
		<view class="cu-modal bottom-modal" :class="{ show: isShow }" @click="hide">
			<view class="cu-dialog">
				<view class="coupon-title">
					<view class="title">优惠券</view>
					<view class="explain">使用说明</view>
				</view>
				<!-- 优惠券数据 -->
				<view class="coupon-data">
					<view class="coupon-list">
						<view class="list" :class="{'forbidden':TabShow === 1}" v-for="(item,index) in useCoupons" :key="index">
							<view class="coupon-price">
								<view class="discounts">
									<text class="min">￥</text>
									<text class="max">{{item.coupon.coupon_price}}</text>
								</view>
								<view class="full-reduction" @click="choose(item.coupon.id)">
									<text>{{item.coupon.title}}</text>
								</view>
								<view class="jag"></view>
							</view>
							<view class="coupon-info">
								<view class="info-title">
									<view class="tag" v-if="item.coupon.type == 0">
										<text >限品类券</text>
									</view>
									<view class="title" v-else-if="item.coupon.type == 1">
										<text >仅可购买酒水部分商品</text>
									</view>
								</view>
								<view class="date-get">
									<view class="date">
										<text>{{item.coupon.start_time | formatDate('-')}}-{{item.coupon.end_time | formatDate('-')}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="list" :class="{'forbidden':TabShow === 0}" v-for="(item,index) in unUseCoupons" :key="index">
							<view class="coupon-price">
								<view class="discounts">
									<text class="min">￥</text>
									<text class="max">{{item.coupon.coupon_price}}</text>
								</view>
								<view class="full-reduction">
									<text>{{item.coupon.title}}</text>
								</view>
								<view class="jag"></view>
							</view>
							<view class="coupon-info">
								<view class="info-title">
									<view class="tag" v-if="item.coupon.type == 0">
										<text >限品类券</text>
									</view>
									<view class="title" v-else-if="item.coupon.type == 1">
										<text >仅可购买酒水部分商品</text>
									</view>
								</view>
								<view class="date-get">
									<view class="date">
										<text>{{item.coupon.start_time | formatDate('-')}}-{{item.coupon.end_time | formatDate('-')}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		props: ['sku','price'],
		data() {
			return {
				isShow: false,
				TabShow: 0,
				useCoupons:[],
				unUseCoupons:[]
			};
		},
		created() {
		var skuIds = this.sku
		this.$http.get('order/mycoupon',{},{}).then(res=>{
			console.log( res.data.data)
			let coupons = res.data.data
			for (let coupon of coupons) {
				if(coupon.coupon.use_min_price < this.price && coupon.status == 0){
					this.useCoupons.push(coupon)
				}else{
					this.unUseCoupons.push(coupon)
				}
			}
			
		})
		// this.$http.get('store/getGoodsCouponList', {
		// 	goods_id: skuIds
		// }, {}).then(res => {
		// 	console.log(res.data.data)
		// 	this.coupons = res.data.data
		// })
		},	filters:{
			// 时间戳处理
			formatDate: function(value,spe='/') {
				value = value*1000
			  let data= new Date(value);
			   let year = data.getFullYear();
			   let month = data.getMonth() + 1;
			   let day = data.getDate();
			   let h = data.getHours();
			   let mm = data.getMinutes();
			   let s = data.getSeconds();
			   month = month > 10 ? month : "0" + month;
			   day = day > 10 ? day : "0" + day;
			   h = h > 10 ? h : "0" + h;
			   mm = mm > 10 ? mm : "0" + mm;
			   s = s > 10 ? s : "0" + s;
			   return `${year}${spe}${month}${spe}${day}`;
			     }
		},
		methods: {
			choose(id){
				this.$emit('childByValue', id)
			},
			show() {
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			},
			/**
			 * tab 点击
			 */
			onTab(index) {
				this.TabShow = index;
			},
			/**
			 * 确认点击
			 */
			onConfirm(e) {
				console.log(e)
				// this.hide();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'UseCoupon.scss';
</style>
